.subPanel {
  @left: @SYSMARGINLEFT + @radius;
  @right: @SYSMARGINRIGHT + @radius;
  @height: @SYSTOPPANELHEIGHT;
  @paddingTop: @SYSTOPPANELHEIGHT;
  @radius: 30px;
  .abs;
  left: @left;
  right: @right;
  top: -@height;
  height: @height;
  border-radius: 0 0 @radius @radius;
  color: @color-white;
  z-index: 0;

  &.open {
    top: @paddingTop
  }

  > .title {
    .abs;
    left: 30px;
    height: @height;
    line-height: @height;
    font-size: 20px;
    //opacity: 0.8;
  }

  > .menus {
    .abs;
    right: 30px;
    top: 4px;
    display: flex;
    > .menu {
      .rel;
      margin: 0 2px;
      padding: 5px;
      border-radius: 5px;
      .animation();
      &:hover {
        background-color: @theme;
      }
      &.active {
        background-color: fade(@theme, 80);
      }
      .icon {
        width: 24px;
        height: 24px;
        margin: 0 13px;
        display: block;
      }
      .label {
        font-size: 12px;
        height: 12px;
        line-height: 12px;
        margin-top: 4px;
        .tac;
        width: 50px;
      }
      .alert {
        .abs;
        width: 20px;
        height: 20px;
        right: 0;
        top: 0;
        background-color: red;
        color: white;
        border-radius: 20px;
        font-size: 12px;
        line-height: 20px;
        .tac;
      }
    }
  }

}